<!DOCTYPE html>
<html lang="en" ng-app="summernoteDemo">
<head>
  <title>Angular-summernote Demo</title>

  <!--summernote dependencies-->
  <script src="components/jquery/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
  <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css">

  <!--summernote-->
  <link rel="stylesheet" href="components/summernote/dist/summernote.css" />
  <script src="components/summernote/dist/summernote.js"></script>
  <script src="components/summernote/lang/summernote-de-DE.js"></script>

  <!--angular-summernote dependencies -->
  <script src="components/angular/angular.min.js"></script>
  <script src="../src/angular-summernote.js"></script>

  <style>
    body {
      margin: 10px 20px;
    }

    h2, h4, h5, h6 {
      background-color: #eee;
      padding: 10px;
    }

    h4 {
      margin-left: 20px;
    }

    .example {
      margin-left: 40px;
    }
  </style>
</head>
<body>
  <h1>angular-summernote</h1>
  <p>angular directive for <a href="http://hackerwins.github.io/summernote/">Summernote</a></p>

  <h2>summernote directive</h2>

    <h4>use element</h4>
    <div class="example">
      <summernote></summernote>
    </div>

    <h4>use attribute</h4>
    <div class="example">
      <div summernote></div>
    </div>

    <div>
      <h4>initial text as inner html</h4>
      <div class="example">
        <summernote><span style="font-weight: bold;">This is initial text.</span></summernote>
      </div>
    </div>

  <h2>summernote options</h2>

    <h4>height</h4>
    <div class="example">
      <summernote height="300"></summernote>
    </div>

    <h4>focus</h4>
    <div class="example">
      <summernote focus></summernote>
    </div>

    <h4>lang</h4>
    <div class="example">
      <summernote lang="de-DE"></summernote>
    </div>

    <div ng-controller="AirmodeCtrl">
      <h4>airmode</h4>
      <div class="example">
        <summernote airMode ng-model="text" config="options" on-media-delete="mediaDelete(target)"></summernote>
      </div>
    </div>

    <div ng-controller="OptCtrl">
      <h4>options object</h4>
      <div class="example">
        <summernote config="options"></summernote>
      </div>
    </div>

  <h2>advanced features</h2>

  <div ng-controller="CodeCtrl">
    <h4>use ngModel to synchronize the value</h4>
    <div class="example">
      <summernote ng-model="text"></summernote>

      <br>
      <textarea type="text" ng-model="text" style="width:100%;"></textarea></br>
      text : {{text}}
    </div>
  </div>

  <div ng-controller="CallbacksCtrl">
    <h4>use callbacks</h4>
    <div class="example">
      <summernote on-init="init()" on-enter="enter()" on-focus="focus(evt)"
                  on-blur="blur(evt)" on-paste="paste(evt)" on-keyup="keyup(evt)" on-keydown="keydown(evt)"
                  on-change="change(contents)"
                  on-image-upload="imageUpload(files)"
                  editable="editable" editor="editor"></summernote>
    </div>
  </div>

  <script>
    angular.module('summernoteDemo', ['summernote'])
        .controller('OptCtrl', function($scope) {
          $scope.options = {
            height: 150,
            toolbar: [
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['color', ['color']],
              ['para', ['ul', 'ol', 'paragraph']],
              ['height', ['height']]
            ]
          };
        })
        .controller('AirmodeCtrl', function($scope) {
          $scope.text = "<h3>This is an Air-mode editable area.</h3>";
          $scope.options = {
            popover: {
              image: [
                ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
              ],
              link: [
                ['link', ['linkDialogShow', 'unlink']]
              ],
              air: [
                ['color', ['color']],
                ['font', ['bold', 'underline', 'clear']],
                ['para', ['ul', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']]
              ]
            }
          };
          $scope.mediaDelete = function(target) {
            console.log('media is delted:', target);
          }
        })
        .controller('CodeCtrl', function($scope) {
          $scope.text = "Hello World";
        })
        .controller('CallbacksCtrl', function($scope) {
          $scope.init = function() { console.log('Summernote is launched'); };
          $scope.enter = function() { console.log('Enter/Return key pressed'); };
          $scope.focus = function(e) { console.log('Editable area is focused'); };
          $scope.blur = function(e) { console.log('Editable area loses focus'); };
          $scope.paste = function(e) {
            console.log('Called event paste: ' +  e.originalEvent.clipboardData.getData('text'));
          };
          $scope.change = function(contents) {
            console.log('contents are changed:', contents, $scope.editable);
          };
          $scope.keyup = function(e) { console.log('Key is released:', e.keyCode); };
          $scope.keydown = function(e) { console.log('Key is pressed:', e.keyCode); };
          $scope.imageUpload = function(files) {
            console.log('image upload:', files);
            console.log('image upload\'s editor:', $scope.editor);
            console.log('image upload\'s editable:', $scope.editable);
          };
        });
  </script>
</body>
</html>
